<template>
  <div class="desktop">

    <div class="top">
      <el-dropdown trigger="click">
        <div class="logo">
          <img :src="headImage" style="width: 20px;height: 20px;" />
         <div class="ml-4"> {{ p }}</div>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="openAppByKey('system_about')">
              <div>关于本站</div>
            </el-dropdown-item>
            <el-dropdown-item class="line"></el-dropdown-item>
            <el-dropdown-item @click="openAppByKey('system_setting')">
              <div>系统偏好设置</div>
            </el-dropdown-item>
            <el-dropdown-item @click="openAppByKey('system_store')">
              <div>应用商店</div>
            </el-dropdown-item>
            <el-dropdown-item class="line"></el-dropdown-item>
            <el-dropdown-item @click="openAppByKey('system_task')">
              <div>强制退出...</div>
            </el-dropdown-item>
            <el-dropdown-item class="line"></el-dropdown-item>
            <el-dropdown-item @click="shutdown">
              <div>关机...</div>
            </el-dropdown-item>
            <el-dropdown-item class="line"></el-dropdown-item>
            <el-dropdown-item @click="lockScreen">
              <div>锁定屏幕</div>
            </el-dropdown-item>
            <el-dropdown-item @click="logout">
              <div>退出登录 {{ userName }}...</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <div class="menu" v-for="item in menu" :key="item.value">
        <el-dropdown trigger="click" placement="bottom-start">
          <div class="item">{{ item.title }}</div>
          <template #dropdown>
            <el-dropdown-menu>
              <template v-for="subItem in item.sub" :key="subItem.value">
                <el-dropdown-item class="line" v-if="subItem.isLine"></el-dropdown-item>
                <el-dropdown-item v-else @click="$store.commit('openMenu', subItem.key)">
                  <div>{{ subItem.title }}</div>
                </el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="space"></div>
      <div class="status">

        <!-- <div class="audio">
          <i
            class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-39"
            @click="showOrHideVolumn"
          ></i>

          <transition name="fade">
            <el-slider
              v-show="isVolumnShow"
              v-model="volumn"
              :show-tooltip="false"
              vertical
            ></el-slider>
          </transition>
        </div> -->
        <div class="datetime" @click="showOrHideCalendar">
          <el-text type="success"> {{ timeString }}</el-text>

        </div>
        <div class="datetime" style="flex-wrap: wrap;">
          <el-text type="primary" @click="openAppByKey('amap')">{{ w.city }}</el-text><el-text
            @click="isweatherShow = !isweatherShow"> -{{ w.weather }} {{ w.temperature + '°C' }}-{{ w.windDirection +
              '风'
            }}</el-text>

          <transition name="fade">
            <weatherDay style="position: fixed;top: 60px;right: 20px;width: 200px;border-radius: 10px;" :qweather="w"
              v-if="isweatherShow"></weatherDay>
          </transition>
        </div>
        <div class="datetime" @click.self="ismShow = !ismShow">
          音乐
          <!-- <div v-if="ismShow" style="position: fixed;top: 60px;left: 200px;width: 200px; border-radius: 10px;">
            <music></music>
          </div> -->
        </div>
        <div class="datetime" @click.self="isnShow = !isnShow">
          新闻
          <!-- <div v-if="ismShow" style="position: fixed;top: 60px;left: 200px;width: 200px; border-radius: 10px;">
            <music></music>
          </div> -->
        </div>
        <div class="datetime" @click.self="issettingShow = !issettingShow">

          设置
        </div>
        <!-- <div class="notification">
          <i class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-25" @click="showOrHideWidget"></i>
        </div> -->
      </div>
    </div>
    <div class="body" @contextmenu.prevent.self="
      hideAllController();
    openMenu($event);
    " @click.stop="hideAllController()">
      <datetime></datetime>
      <div class="desktop-app">
        <template v-for="item in deskTopAppList" :key="item.key">

          <div class="app-item" @click="tipshow = true; selectAPP = item" v-if="!item.hideInDesktop">
            <el-badge :value="item.outLink ? '外' : '内'" class="item" :type="item.outLink ? 'green' : 'primary'"
              :hidden="!item.outLink">
              <div class="icon">
                <i v-if="item.icon !== 'svg'" :style="{
                  backgroundColor: item.iconBgColor,
                  color: item.iconColor,
                }" class="iconfont" :class="item.icon"></i>
                <div v-else :style="{
                  backgroundColor: item.iconBgColor,
                  color: item.iconColor,
                }">
                  <img :src="item.svg" class="iconfont" />
                </div>
              </div>
            </el-badge>
            <div class="title">{{ item.title }}</div>
          </div>

        </template>
      </div>
      <transition-group name="fade-window">

        <template v-for="item in $store.state.openAppList" :key="item.pid">
          <App v-if="!item.outLink" v-show="!item.hide" :app="item" :key="item.pid"></App>
        </template>
      </transition-group>
      <transition name="fade-menu">
        <div v-show="rightMenuVisible" :style="{ left: rightMenuLeft + 'px', top: rightMenuTop + 'px' }"
          class="contextmenu">
          <div @click="lockScreen">锁定屏幕...</div>
          <hr />
          <div @click="openAppByKey('system_setting')">系统偏好设置...</div>
          <div @click="openAppByKey('system_task')">强制退出...</div>
          <hr />
          <div @click="$message.warning('即将上线，敬请期待')">设置壁纸...</div>
          <div @click="openAppByKey('system_about')">关于我们</div>
        </div>
      </transition>
      <transition-group name="fade-widget">
        <div v-show="isWidgetShow">
          <template v-for="item in $store.state.openWidgetList" :key="item.pid">
            <Widget v-if="!item.outLink" v-show="!item.hide" :app="item" :key="item.pid"></Widget>
          </template>
        </div>
      </transition-group>
    </div>
    <Dock></Dock>
    <transition name="fade">
      <!-- <el-calendar v-model="nowDate" v-if="isCalendarShow"></el-calendar> -->
      <baidu-calendar v-if="isCalendarShow" class="bg-white"
        style="position: fixed;top: 60px;right: 300px;width: 600px;border-radius: 10px;"></baidu-calendar>
    </transition>
    <el-dialog v-model="ismShow" title="歌曲" width="600" :before-close="handleClose">
      <music></music>
    </el-dialog>
    <el-dialog v-model="isnShow" title="歌曲" width="600" :before-close="handleClose">
      <news></news>
    </el-dialog>
    <el-dialog v-model="issettingShow" title="设置" width="1200" :before-close="handleClose">

      <div>

        <el-row>
          <el-col :span="8">
            <div style="height:480px;overflow:scroll;">
              <el-form :model="app" label-width="80px" class="m-1">
                <el-form-item label="标识">
                  <el-input v-model="app.appkey"></el-input>
                </el-form-item>
                <el-form-item label="组件">
                  <el-input v-model="app.component"></el-input>
                </el-form-item>
                <el-form-item label="图标">
                  <el-input v-model="app.svg">
                    <template #append>
                      <el-upload class="avatar-uploader" :show-file-list="false" :http-request="uploadAction">
                        <el-button icon="UploadFilled" />

                      </el-upload>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="标题">
                  <el-input v-model="app.title"></el-input>
                </el-form-item>
                <!-- <el-row>
                  <el-col :span="12">
                    <el-form-item label="宽">
                      <el-input v-model="app.width"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="高">
                      <el-input v-model="app.height"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row> -->
                <el-form-item label="链接">
                  <el-input v-model="app.url"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                  <el-input v-model="app.path"></el-input>
                </el-form-item>
                <el-form-item label="分组">
                  <el-input v-model="app.p"></el-input>
                </el-form-item>
                <div>
                  <div v-for="(o2, i2) in app.otherJson" :key="i2" class="mb-1">
                    <el-row gutter="2">
                      <el-col :span="6">

                        <el-select v-model="o2.t" placeholder="Select">
                          <el-option label="文字" value="文字" />
                          <el-option label="连接" value="连接" />
                        </el-select>

                      </el-col>
                      <el-col :span="8">

                        <el-input v-model="o2.k"></el-input>

                      </el-col>
                      <el-col :span="8">

                        <el-input v-model="o2.v"></el-input>

                      </el-col>
                      <el-col :span="2">
                        <div class="text-center">
                          <el-button type="danger" icon="Delete" circle @click="app.otherJson.splice(i2, 1)" />

                        </div>
                      </el-col>
                    </el-row>

                  </div>
                </div>
                <el-form-item label="">

                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="16">

            <div style="height:480px;overflow:scroll;">
              <el-tabs v-model="p"  type="border-card">
    <el-tab-pane :label="key" :name="key"  v-for="(value, key) in app_list" :key="key">
      <div v-for="(o, i) in value" :key="i" class="border m-1 p-2 shadow min-h-18">

<el-row>
  <el-col :span="4">
    <div class="relative">
      <img :src="o.svg" class="absolute w-10 min-h-10"
        style="top:50%; left: 50%; transform: translate(-50%, 15%);" />
    </div>
  </el-col>
  <el-col :span="17">

    <div>{{ o.appkey }}/{{ o.component }}</div>
    <div class="mt-2" v-if="o.url"><el-tag type="primary">{{ o.url }}</el-tag></div>
    <div class="mt-2" v-if="o.path"> <el-tag type="success">{{ o.path }}</el-tag></div>

  </el-col>
  <el-col :span="3">
    <el-button type="primary" icon="Edit" circle
      @click="app = o; o.otherJson = JSON.parse(o.otherJson)" />
    <el-button type="danger" icon="Delete" circle @click="del(o, i)" />
  </el-col>
</el-row>
</div>
    </el-tab-pane>
 
  </el-tabs>
              
            </div>
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <el-button type="success" class="float-left" @click="REG">REG</el-button>
        <div class="float-left w-50 ml-2">
          <el-select v-model="p" placeholder="Select" @change="handleSelectChange">
            <el-option v-for="item in plist" :key="item" :label="item" :value="item" />
          </el-select>
        </div>
        <el-button type="info" @click="app.otherJson.push({ t: '文字', k: '', v: '' })">添加其他</el-button>
        <el-button type="primary" @click="saveApp">保存</el-button>
      </template>
    </el-dialog>
    <el-dialog title="" width="400" class="no-header-dialog" v-model="tipshow">

      <section class="card" style="margin:0 auto">
        <header>
          <h2 class="title">{{ selectAPP.title }}</h2>
          <h1 class="price p-4">
            <img :src="selectAPP.svg" class=" w-full h-30" />
          </h1>
        </header>
        <!-- <p class="desc">Etiam ac convallis enim, eget euismod dolor.</p> -->
        <ul class="lists mt-4">
          <li class="list border p-2" v-for="(o, i) in selectAPP.otherJson">
            <div>{{ o.k }}</div>
            <div>{{ o.v }}</div>
          </li>

        </ul>
        <a v-if="selectAPP.url" :href="selectAPP.url" target="_blank" class="action">
          打开Docker
        </a>
        <a v-if="selectAPP.path" :href='`zt${selectAPP.appkey}://`' target="_blank" class="action2 mt-2 ">
          打开本地
        </a>
      </section>

    </el-dialog>
  </div>
</template>
<script>
import { useWeather, useCitySearch, lazyAMapApiLoaderInstance } from "@vuemap/vue-amap";
import ax from '@/helper/axios.js'
import App from "@/components/App";
import Dock from "@/components/Dock";
import Widget from "@/components/Widget";
import datetime from '@/components/datetime.vue';
import weatherDay from '@/components/weatherComponents/WeatherDay.vue';
import config from "@/config"
import COS from 'cos-js-sdk-v5';
import music from '@/components/music.vue';
import news from '@/components/news.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
export default {
  components: {
    App,
    Dock,
    Widget,
    datetime,
    weatherDay,
    news,
    music
  },
  data() {
    return {
      app: {
        component: "DemoWeb",

        p: 'HOME',
        otherJson: [
          // {
          //   type: '文字',
          //   key: "",
          //   value: '',
          // }
        ]
      },
      selectAPP: {},
      
      app_list: [{
        key: "system_about",
        component: "SystemAbout",
        icon: "icon-question",
        title: "关于本站",
        iconColor: "#fff",
        iconBgColor: "#23282d",
        width: 400,
        height: 250,
        disableResize: true,
        hideInDesktop: true,
        menu: [
          {
            key: "about",
            title: "关于",
            sub: [
              {
                key: "close",
                title: "关闭",
              },
            ],
          },
          {
            key: "help",
            title: "帮助",
            sub: [
              {
                key: "send",
                title: "发送反馈",
              },
            ],
          },
        ],
      }],
      plist: [],
      p: 'HOME',
      cos: new COS({
        SecretId: config.Cos.SecretId, // 推荐使用环境变量获取；用户的 SecretId，建议使用子账号密钥，授权遵循最小权限指引，降低使用风险。子账号密钥获取可参考https://cloud.tencent.com/document/product/598/37140
        SecretKey: config.Cos.SecretKey, // 推荐使用环境变量获取；用户的 SecretKey，建议使用子账号密钥，授权遵循最小权限指引，降低使用风险。子账号密钥获取可参考https://cloud.tencent.com/document/product/598/37140
      }),
      buckets: config.Cos.bucketList[0],
      region: config.Cos.region[0],
      isCalendarShow: false,
      isweatherShow: false,
      ismShow: false,
      isnShow: false,
      nowDate: new Date(),
      volumnDelayTimer: false,
      volumn: 80,
      isVolumnShow: false,
      rightMenuVisible: false,
      issettingShow: false,
      rightMenuLeft: 0,
      rightMenuTop: 0,
      userName: "",
      menu: [],
      timeString: "",
      deskTopAppList: [],
      otherData: [
        {
          type: '文字',
          key: "",
          value: '',
        }
      ],
      deskTopMenu: [
        // {
        //   key: "desktop",
        //   title: "桌面",
        //   sub: [
        //     {
        //       key: "big_icon",
        //       title: "大图标",
        //     },
        //     {
        //       key: "big_icon",
        //       title: "小图标",
        //     },
        //     {
        //       isLine: true
        //     },
        //     {
        //       key: "align_left",
        //       title: "左侧排列",
        //     },
        //     {
        //       key: "align_right",
        //       title: "右侧排列",
        //     },
        //     {
        //       isLine: true
        //     },
        //     {
        //       key: "wall",
        //       title: "更换壁纸...",
        //     }
        //   ]
        // }
      ],
      isWidgetShow: false,
      w: {},
      tipshow: false,
      headImage: 'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/teng.png',


    };
  },
  watch: {
    volumn() {
      this.$store.commit("setVolumn", this.volumn);
      clearTimeout(this.volumnDelayTimer);
      this.volumnDelayTimer = setTimeout(() => {
        this.isVolumnShow = false;
      }, 3000);
    },
    "$store.state.volumn"() {
      console.log(this.$store.state.volumn);
    },
    "$store.state.nowApp"() {
      this.menu = this.$store.state.nowApp.menu;
    },
    "$store.state.launchpad"() {
      this.$emit("launchpad", this.$store.state.launchpad);
    },
  },
  async created() {
    this.menu = this.deskTopMenu;
    
    this.userName = localStorage.getItem("user_name") || "";
    //this.deskTopAppList =this.app_list;// await this.tool.getDeskTopApp();
    console.log('this.deskTopAppList:', this.deskTopAppList)
    this.startTimer();
    this.$store.commit("getDockAppList");
    if (localStorage.getItem('p')) {
      this.p = localStorage.getItem('p')
    }
    else
    {
      localStorage.setItem('p',this.p)
    }
    console.log(':', this.deskTopAppList)
    this.getapplist();
    lazyAMapApiLoaderInstance.then(() => {
      useCitySearch().then(res => {
        const { getLocalCity } = res;
        getLocalCity().then(cityResult => {
          // center.value = cityResult.bounds.getCenter().toArray()
          console.log('cityResult: ', cityResult)
          useWeather().then(res => {
            const { getLive, getForecast } = res;
            getLive(cityResult.city).then(liveResult => {
              console.log('liveResult: ', liveResult)
              this.w = liveResult
            });
            getForecast(cityResult.city).then(forecastResult => {
              console.log('forecastResult: ', forecastResult)
              this.w.forecastResult = forecastResult;
            })
          })
        })
      })
    })

  },
  mounted() {
    // let now_time = Math.floor(Date.now() / 1000);
    // let token = md5(now_time + '' + md5('bvlP8Vo3uZXlZCwMvQub3Z0PQmQTIBUV'));

    this.getapplist();
  },
  methods: {
    REG() {
      var pathlist = this.app_list[localStorage.getItem('p')].filter(x => x.path !== null && x.path !== '')
      console.log('pathlist:', pathlist)
      let regContent = `Windows Registry Editor Version 5.00\n`;
      pathlist.forEach((o, i) => {
        regContent += `[HKEY_CLASSES_ROOT\\zt${o.appkey}]\n
          @="zt${o.appkey} Protocol"\n
          "URL Protocol"= ""\n
          
          [HKEY_CLASSES_ROOT\\zt${o.appkey}\\DefaultIcon]\n
          @="${o.path}"\n
          
          [HKEY_CLASSES_ROOT\\zt${o.appkey}\\shell]\n
          @= ""\n
          
          [HKEY_CLASSES_ROOT\\zt${o.appkey}\\shell\open]\n
          @= ""\n
          
          [HKEY_CLASSES_ROOT\\zt${o.appkey}\\shell\\open\\command]\n
          @="${o.path}"\n`;
      })
      console.log('regContent:', regContent)
      const downloadLink = document.createElement('a');
      downloadLink.href = 'data:application/octet-stream;charset=utf-8,' + encodeURIComponent(regContent);

      downloadLink.download = 'ztapplink.reg';
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
    },
    handleSelectChange(value) {
    console.log('value:', value)
      // 将选中的值存储到localStorage中
      localStorage.setItem('p', value);

      this.getapplist()
    },
    del(o, i) {
      ElMessageBox.confirm(
        '您确认要删除' + o.title + '吗?',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'error',
        }
      )
        .then(() => {
          ax.delete('/4004/api/AppList/' + o.id).then(res => {
            console.log('res:', res)
            if (res.code === 200) {
              ElMessage({
                message: '删除成功',
                type: 'success',
              });
              this.getapplist();
            }
          })
        })
        .catch(() => {

        })
    },
    getapplist() {
      ax.get('/4004/api/AppList').then(res => {

        console.log('res:', res)
        this.app_list = [...res.data];
        this.app_list.forEach((o, i) => {
          o.key = o.appkey;
          if (o.otherJson) {
            o.otherJson = JSON.parse(o.otherJson);
          }
          else {
            o.otherJson = []
          }
          if (o.url === '' || o.url === null) {
            o.hideInDesktop = true;
          }
          // innerLink keepInDock outLink
          if (o.innerLink === 1) {
            o.innerLink = true;
          }
          if (o.keepInDock === 1) {
            o.keepInDock = true;
          }
          if (o.outLink === 1) {
            o.outLink = true;
          }
        })
        this.deskTopAppList = this.app_list;

        const groupedByP = this.app_list.reduce((acc, item) => {
          // 获取属性p的值
          const groupKey = item.p;

          // 如果acc中没有这个分组，则初始化一个数组
          if (!acc[groupKey]) {
            acc[groupKey] = [];
            this.plist.push(groupKey)
          }

          // 将当前项添加到对应的分组中
          acc[groupKey].push(item);

          return acc;
        }, {});
        this.plist = this.plist.filter((item, index, arr) => arr.indexOf(item) === index);
        console.log(groupedByP, this.plist);
      
        this.deskTopAppList = this.app_list.filter(x=>x.p=== localStorage.getItem('p'))
        this.app_list = groupedByP
      });
    },
    saveApp() {
      this.app.icon = 'svg';
      this.app.iconColor = '#fff';
      this.app.iconBgColor = '#000';
      this.app.outLink = true;
      this.app.innerLink = false;
      this.app.keepInDock = false;
      this.app.otherJson = JSON.stringify(this.app.otherJson)

      delete this.app.key;

      console.log('this.app:', this.app)
      if (this.app.id) {
        ax.put('/4004/api/AppList/' + this.app.id, this.app).then(res => {

          console.log('res:', res)
          if (res.code === 200) {
            ElMessage({
              message: '保存成功',
              type: 'success',
            });
            this.app = {
              component: "DemoWeb",

              p: 'HOME',
              otherJson: [

              ]
            }
            this.getapplist();
          }
        });
      }
      else {
        ax.post('/4004/api/AppList', this.app).then(res => {

          console.log('res:', res)
          if (res.code === 200) {
            ElMessage({
              message: '保存成功',
              type: 'success',
            });
            this.app = {
              component: "DemoWeb",

              p: 'HOME',
              otherJson: [

              ]
            }
            this.getapplist();
          }
        });
      }

    },
    async uploadAction(file) {
      console.log('file', file);
      let that = this
      const result = await this.cos.uploadFile({
        Bucket: this.buckets,
        Region: this.region,
        Key: file.file.name,
        Body: file.file,
        onProgress(progressData) {
          console.log(JSON.stringify(progressData));
          up.value = (progressData.loaded / progressData.total).toFixed(2);
        },
        onFileFinish(err, data, options) {
          console.log('err:', err)
          console.log('data:', data)
          console.log('options:', options)

          that.app.svg = 'https://' + data.Location
          console.log(' this.app.svg:', that.app.svg)
        },
      });
    },
    /**
     * @description: 显示或隐藏日历
     */
    showOrHideCalendar() {
      this.isCalendarShow = !this.isCalendarShow;
    },
    /**
     * @description: 显示或隐藏音量操作
     */
    showOrHideVolumn() {
      this.isVolumnShow = !this.isVolumnShow;
      if (this.isVolumnShow) {
        clearTimeout(this.volumnDelayTimer);
        this.volumnDelayTimer = setTimeout(() => {
          this.isVolumnShow = false;
        }, 3000);
      }
    },
    /**
     * @description: 隐藏所有弹出的控制器
     */
    hideAllController() {
      this.isVolumnShow = false;
      this.rightMenuVisible = false;
      this.isCalendarShow = false;
      this.isweatherShow = false;
      this.ismShow = false;
    },
    /**
     * @description: 打开右键菜单
     */
    openMenu(e) {
      const menuMinWidth = 105;
      const offsetLeft = this.$el.getBoundingClientRect().left; // container margin left
      const offsetWidth = this.$el.offsetWidth; // container width
      const maxLeft = offsetWidth - menuMinWidth; // left boundary
      const left = e.clientX - offsetLeft; // margin right

      if (left > maxLeft) {
        this.rightMenuLeft = maxLeft;
      } else {
        this.rightMenuLeft = left;
      }

      this.rightMenuTop = e.clientY - 30;
      this.rightMenuVisible = true;
    },
    /**
     * @description: 打开时间计时器
     */
    startTimer() {
      setInterval(() => {
        this.timeString = this.tool.formatTime(new Date(), "MM-dd HH:mm");
      }, 1000);
    },
    /**
     * @description: 打开指定key的应用
     */
    openAppByKey(key) {
      this.$store.commit("openAppByKey", key);
    },
    /**
     * @description: 锁定屏幕
     */
    lockScreen() {
      this.$emit("lockScreen");
    },
    /**
     * @description: 关机
     */
    shutdown() {
      this.$emit("shutdown");
    },
    /**
     * @description: 注销登录
     */
    logout() {
      this.$emit("logout");
    },
    showOrHideWidget() {
      this.isWidgetShow = !this.isWidgetShow;
    },
    // methods部分





  },
};
</script>
<style>
.el-tabs__item.is-active {
  color: #409EFF !important;
  opacity: 1;
}
.onerow {
  overflow: hidden;
  /* 超出容器部分隐藏 */
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
  white-space: nowrap;
  /* 不允许文本换行 */
}

.no-header-dialog {
  background: transparent !important;
  box-shadow: 0 0 0 0 rgb(0 0 0 / 0%), 0 8px 20px rgb(0 0 0 / 0%);
}

.no-header-dialog .el-dialog__header {
  display: none;
}

.op-calendar-pc-right {
  height: 100%;
  margin-left: 480px;
  color: #fff;
  text-align: center;
  border-radius: 0 16px 16px 0;
  background: #8f0707 !important;
}

.op-calendar-pc-left {
  height: 100%;
  padding: 16px 16px 0;
  float: left;
  border-radius: 16px 0 0 16px;
  border: 2px solid #8f0707 !important;
  border-right: none;
  box-sizing: border-box;
  background: #333333;
  color: #fff
}

.op-calendar-pc-daynumber {
  display: block;
  height: 22px;
  font-size: 18px;
  color: #fff !important;
}

.op-calendar-pc-right-almanacbox {
  position: relative;
  margin-top: 12px;
  padding-top: 12px;
  padding-bottom: 0px !important;
  margin-bottom: -100px;
  background: rgba(255, 255, 255, .15);
}

.top .el-dropdown {
  color: white !important;
  height: 100% !important;
}

.top .el-calendar-day {
  height: 30px !important;
}

.top .is-today {
  background: #4b9efb !important;
  color: white !important;
}
</style>
<style scoped lang="scss">
.desktop {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: white;
  overflow: hidden;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);

  .top {
    height: 28px;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: row;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    padding: 0px 5px;
    z-index: 100;

    .logo {
      height: 100%;
      align-items: center;
      justify-content: center;
      padding: 0px 15px;
      cursor: pointer;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      .iconfont {
        font-size: 16px;
        margin-top: -3px;
      }

      .el-select {
        position: absolute;
        opacity: 0;
      }
    }

    .logo:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }

    .space {
      flex-grow: 1;
    }

    .menu {
      display: flex;
      flex-direction: row;
      font-size: 13px;
      height: 100%;
      font-weight: 500;

      .item {
        font-size: 13px;
        padding: 0px 15px;
        display: inline-block;
        flex-grow: 1;
        cursor: pointer;
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: center;
      }

      .item:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }
    }

    .status {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      height: 100%;

      .audio {
        cursor: pointer;
        padding: 0px 10px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;

        .iconfont {
          font-size: 20px;
        }

        .el-slider {
          position: absolute;
          top: 40px;
          height: 80px;
        }
      }

      .audio:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }

      .datetime {
        cursor: pointer;
        padding: 0px 10px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;

        .el-calendar {
          color: #333;
          background: rgba(255, 255, 255, 0.98);
          position: fixed;
          top: 40px;
          right: 20px;
          width: 500px;
          border-radius: 10px;
        }
      }

      .datetime:hover {
        background-color: rgba(255, 255, 255, 0.1);
      }

      .notification {
        cursor: pointer;
        padding: 0px 10px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;

        .iconfont {
          font-size: 20px;
        }

        .notification:hover {
          background-color: rgba(255, 255, 255, 0.1);
        }
      }
    }
  }

  .body {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;

    .desktop-app {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-end;
      padding: 20px;
      flex-wrap: wrap-reverse;

      .app-item {
        padding: 10px 0px;
        flex-direction: column;
        text-align: center;
        text-shadow: 0px 0px 2px rgb(0 0 0 / 50%);
        cursor: pointer;
        border-radius: 10px;
        border: 2px solid transparent;
        justify-content: center;
        align-items: center;
        width: 80px;

        .icon {
          border-radius: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
        }

        .iconfont {
          font-size: 28px;
          border-radius: 10px;
          padding: 8px;
        }

        .title {
          font-size: 12px;
          margin-top: 5px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }

      .app-item:hover {
        border: 2px solid rgba(255, 255, 255, 0.5);
      }
    }

    .contextmenu {
      position: absolute;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 5px;
      box-shadow: 0px 0px 10px rgb(0 0 0 / 30%);
      color: #333;
      font-size: 14px;
      text-align: left;
      width: 200px;
      overflow: hidden;
      padding: 2px 0px;
      text-shadow: none;
      z-index: 100;

      hr {
        border: none;
        border-top: 1px solid #ddd;
      }

      div {
        cursor: pointer;
        font-size: 13px !important;
        color: #333;
        border-radius: 5px;
        line-height: 2;
        padding: 0px 12px;
        display: flex;
        align-items: center;
        margin: 3px 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      div:hover {
        background: #4b9efb;
        color: white;
        border-radius: 5px;
      }
    }
  }

  .footer {
    display: flex;
    z-index: 100;
  }
}

/* From Uiverse.io by YeiserBytes */
:root {
  --primary-color: #0ea5e9;
  --secondary-color: #f8fafc;
  --accent-color: #020617;
}

.card {
  margin-left: -1rem;
  margin-right: -1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: 2rem;
  width: 320px;
  flex-direction: column;
  border-radius: 1rem;
  background-color: #020617;
  padding: 1.5rem;
}

header {
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 1.2rem;
  line-height: 2rem;
  font-weight: 700;
  color: #f8fafc90;
}

.price {
  font-size: 3.75rem;
  line-height: 1;
  font-weight: 700;
  color: #f8fafc;
}

.desc {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.625;
  text-wrap: pretty;
  color: #f8fafc90;
}

.lists {
  margin-bottom: 1.5rem;
  flex: 1 1 0%;
  color: #f8fafc90;
}

.lists .list {
  margin-bottom: 0.5rem;

  margin-left: 0.5rem;
}

.lists .list svg {
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  margin-right: 0.5rem;
  color: #0ea5e9;
}

.action {
  border: none;
  outline: none;
  display: inline-block;
  border-radius: 0.5rem;
  background-color: #0ea5e9;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #f8fafc;
  cursor: pointer;
  transition: all 0.3s ease-in-out;

  &:hover {
    background-color: #0284c7;
  }
}

.action2 {
  border: none;
  outline: none;
  display: inline-block;
  border-radius: 0.5rem;
  background-color: #67C23A;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #f8fafc;
  cursor: pointer;
  transition: all 0.3s ease-in-out;

  &:hover {
    background-color: rgb(82.4, 155.2, 46.4);
  }
}
</style>
